<template>
  <el-dialog title="打印报销单" :visible.sync="show" width="1000px" @close="dialogClose">
    <div ref="printRef" class="print-content">
      <div class="p-title">{{ title }}</div>
      <div class="p-title-2">{{ subTitle }}</div>
      <div class="t-b">
        <div class="t-r">
          <div class="t-d">订单所属事业部</div>
          <div class="t-d">{{ editForm.department || "--" }}</div>
          <div class="t-d">报销人</div>
          <div class="t-d">{{ editForm.user_name || "--" }}</div>
          <div class="t-d">日期</div>
          <div class="t-d">{{ editForm.created_time || "--" }}</div>
        </div>
        <div class="t-r">
          <div class="t-d t-c">费用明细</div>
        </div>
        <div class="t-r">
          <div class="t-d">回款编号</div>
          <div class="t-d">客户名称</div>
          <div class="t-d">费用类别</div>
          <div class="t-d">成本</div>
          <div class="t-d">可使用成本</div>
          <div class="t-d">办理事项描述</div>
          <div class="t-d">报销金额</div>
        </div>
        <div v-for="item in dataList" :key="item.id" class="t-r">
          <div class="t-d">{{ item.order_sn || "--" }}</div>
          <div class="t-d">{{ item.customer_name || "--" }}</div>
          <div class="t-d">{{ item.type || "--" }}</div>
          <div class="t-d">{{ item.cost_money_all || "--" }}元</div>
          <div class="t-d">{{ item.cost_money || "--" }}元</div>
          <div class="t-d">{{ item.ramark || "--" }}</div>
          <div class="t-d">{{ item.money || "--" }}元</div>
        </div>
        <div class="t-r">
          <div class="t-d">报销总金额</div>
          <div class="t-d f-2">{{ editForm.total_money || "--" }}元</div>
          <div class="t-d">金额大写</div>
          <div class="t-d f-2">{{ editForm.upper || "--" }}</div>
        </div>
        <div class="t-r">
          <div class="t-d">收款人</div>
          <div class="t-d">{{ editForm.payee || "--" }}</div>
          <div class="t-d">开户行</div>
          <div class="t-d">{{ editForm.opening_bank || "--" }}</div>
          <div class="t-d">银行账号</div>
          <div class="t-d">{{ editForm.bank_number || "--" }}</div>
        </div>
        <div class="t-r">
          <div class="t-d t-c">审批记录</div>
        </div>
        <div class="t-r">
          <div class="t-d">审批人</div>
          <div class="t-d">审批结果</div>
          <div class="t-d">审批意见</div>
          <div class="t-d">审批时间</div>
        </div>
        <div v-for="item in examineList" :key="item.id" class="t-r">
          <div class="t-d">{{ item.realname || "--" }}</div>
          <div class="t-d">
            {{
              item.status == 1
                ? "审核通过"
                : item.status == 2
                ? "撤销"
                : item.status == 0
                ? "审核失败"
                : "--"
            }}
          </div>
          <div class="t-d">{{ item.content || "--" }}</div>
          <div class="t-d">{{ item.check_time || "--" }}</div>
        </div>
      </div>
      <div class="f">
        <div>打印人：{{ userInfo.realname || "--" }}</div>
        <div>打印时间：{{ printDate || "--" }}</div>
      </div>
    </div>
    <div slot="footer">
      <el-button @click="show = false">取 消</el-button>
      <el-button type="primary" @click="handlePrint">打 印</el-button>
    </div>
  </el-dialog>
</template>
<script>
import moment from "moment";
import html2canvas from "html2canvas";
import { mapGetters } from "vuex";
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    form: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      title: "中慧蜀云集团有限公司",
      subTitle: "报销申请单",
      printDate: "",
      editForm: {
        department: "", // 部门
        created_time: "", // 日期
        realname: "", // 报销人
        detail: [], // 报销订单列表
        total_money: "", // 总金额
        upper: "", // 大写金额
        payee: "", // 收款人
        opening_bank: "", // 开户行
        bank_number: "", // 银行账号
        attachment: "", // 附件
      },
      dataList: [], // 报销订单列表
      examineList: [], // 审核列表
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
    show: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
        this.$emit("on-close");
      },
    },
  },
  watch: {
    value(val) {
      if (val) {
        this.$nextTick(() => {
          this.editForm = Object.assign({}, this.form);
          this.editForm.created_time = moment(this.editForm.created_time).format(
            "YYYY-MM-DD"
          );
          this.printDate = moment().format("YYYY-MM-DD HH:mm:ss");
          this.dataList = this.form.detail || [];
          this.examineList = this.form.examineRecord || [];
        });
      }
    },
  },
  methods: {
    // 关闭弹窗
    dialogClose() {
      this.show = false;
    },
    handlePrint() {
      const printElement = this.$refs.printRef;
      const canvas = document.createElement("canvas");
      canvas.width = printElement.offsetWidth;
      canvas.height = printElement.offsetHeight;
      html2canvas(printElement).then((ctx) => {
        const imgData = ctx.toDataURL("image/png");
        const printWindow = window.open("", "");
        printWindow.document.write(
          "<html><head><title>中慧蜀云集团有限公司-报销申请单</title></head><body>"
        );
        printWindow.document.write(
          '<img src="' + imgData + '" style="width:100%; height:auto;">'
        );
        printWindow.document.write("</body></html>");
        printWindow.document.close();
        printWindow.onload = () => {
          printWindow.onafterprint = () => {
            printWindow.close();
          };
          printWindow.print();
          this.show = false;
        };
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.p-title {
  font-size: 26px;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  color: #000;
}
.p-title-2 {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  color: #000;
}
.t-b {
  border: 1px solid #000;
}
.t-b .t-r {
  display: flex;
  border-bottom: 1px solid #000;
}
.t-b .t-r:last-child {
  border-bottom: none;
}
.t-b .t-r .t-d {
  flex: 1;
  min-height: 36px;
  border-right: 1px solid #000;
  padding: 0 10px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.t-b .t-r .t-d:last-child {
  border-right: none;
}
.f {
  display: flex;
  height: 40px;
  align-items: center;
}
.f > div {
  flex: 1;
}
.f-2 {
  flex: 2;
  padding: 0 20px;
}
.f-5 {
  flex: 5;
}
.t-c {
  justify-content: center;
}

@media print {
  img {
    page-break-before: always;
    page-break-after: always;
  }
}
</style>
